<!doctype html>
<html lang="en">

<head>
	<title>鑫洋泉运营管理平台</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- VENDOR CSS -->
	<link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../assets/vendor/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../assets/vendor/dataTables/jquery.dataTables.min.css">
	<link rel="stylesheet" href="../assets/vendor/linearicons/style.css">
	<!-- MAIN CSS -->
	<link rel="stylesheet" href="../assets/css/main.css">
	<!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
	<link rel="stylesheet" href="../assets/css/demo.css">
	<link rel="stylesheet" href="../assets/css/sweetalert.css">
	<!-- GOOGLE FONTS -->
	<!-- <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet"> -->
	<!-- ICONS -->
	<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="../assets/img/favicon.png">
</head>

<body>
	<!-- WRAPPER -->
	<div id="wrapper">
		<!-- NAVBAR -->
		<nav class="navbar navbar-default navbar-fixed-top">
			<h1 class="header_1">
				 鑫洋泉运营管理系统 
			</h1>
		</nav>
		<!-- END NAVBAR -->
		<!-- LEFT SIDEBAR -->
		<div id="sidebar-nav" class="sidebar">
			<div class="sidebar-scroll">
				<nav>
					<ul class="nav">
						<li><a href="index.html" class="active"><i class="lnr lnr-home"></i> <span>首页</span></a></li>
						<li><a href="device.html" class=""><i class="lnr lnr-chart-bars"></i> <span>车辆信息</span></a></li>
                        <li><a href="custom.html" class=""><i class="lnr lnr-chart-bars"></i> <span>客户信息</span></a></li>
                         
                        <li>
                            <a href="#"><i class="lnr lnr-chart-bars"></i> <span>SIM卡管理</span></a>
                            <ul class="nav">
                                <li><a href="cardsStatistics.html">统计信息</a></li>
                                <li><a href="cardsList.html">列表信息</a></li>
                            </ul>
                        </li>
						<li>
							<a href="config.html"><i class="lnr lnr-chart-bars"></i> <span>配置管理</span></a>
							<ul class="nav">
								<li><a href="config.html" class=""><span>默认配置列表</span></a></li>
								<li><a href="parameters.html?1" class=""><span>解码类型</span></a></li>
								<li><a href="parameters.html?2" class=""><span>主机盒界面</span></a></li>
								<li><a href="parameters.html?3" class=""><span>前景和前后视角</span></a></li>
								<li><a href="parameters.html?4" class=""><span>转向视角</span></a></li>
								<li><a href="parameters.html?5" class=""><span>轨迹线类型</span></a></li>
						
							</ul>
						</li><!--<li><a href="device_detail.html" class=""><i class="lnr lnr-cog"></i> <span>设备详情</span></a></li>-->
					</ul>
				</nav>
			</div>
		</div>
		<!-- END LEFT SIDEBAR -->
		<!-- MAIN -->
		<div class="main">
			<!-- MAIN CONTENT -->
			<div class="main-content">
				<div class="container-fluid">
					<!--<h3 class="page-title">Panels</h3>-->
					<div class="row" id="vehiclesList">
						<div class="col-md-12">
							<!-- PANEL HEADLINE -->
							<div class="panel panel-headline">
								<div class="panel-heading">
									<div class="col-md-11">
										<h3 class="panel-title">充值信息：</h3>
									</div>
									<!--<div id="deviceAdd" class="col-md-1">
										<span class="input-group-btn"><input type="button" onclick="showModal('vehicleC')" class="btn btn-primary" value="添加"></span>
									</div>									-->
                                    <!--<p class="panel-subtitle">Panel to display most important information</p>-->
								</div>
								<div class="panel-body">
									<div class="row">
										<table id="chargeRecord" class="col-md-12 display" cellspacing="0" width="100%">
											
										</table>
									</div>
								</div>
							</div>
							<!-- END PANEL HEADLINE -->
						</div>
					</div>
				</div>
			</div>
			<!-- END MAIN CONTENT -->
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">套餐信息</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <!--<label for="user_id" class="col-sm-3 control-label">类型</label>-->
                                <!--{"packageId":"R0006",
                                "name":"移动-1G/月(叠加套餐)",
                                "operator":"移动",
                                "flowTotal":1024,
                                "activeMonth":"2017-05-05 09:45:50"}-->
								<div class="col-sm-5">
									<label>套餐编号</label>
								</div>
                                <div class="col-sm-5">
                                    <label id="packageId"></label>
                                </div>
                            </div>
                            <div class="form-group">
								<div class="col-sm-5">
                                	<label  class="control-label">套餐名称:</label>
								</div>
                                <div class="col-sm-5">
									<label id="name"  class="control-label"></label>
                                </div>
                            </div>
                            <div class="form-group">
								<div class="col-sm-5">
                                	<label  class="control-label">运营商:</label>
								</div>
                                <div class="col-sm-5">
									<label id="operator" class="control-label"></label>
                                </div>
                            </div>
                            <div class="form-group">
								<div class="col-sm-5">
                                	<label  class="control-label">套餐内总流量流量:</label>
								</div>
                                <div class="col-sm-5">
									<span id="flowTotal" class="control-label"></span>
                                </div>
                            </div>
                            <div class="form-group">
								<div class="col-sm-5">
                                	<label  class="control-label">套餐生效月数:</label>
								</div>
                                <div class="col-sm-5">
									<label id="activeMonth" class="control-label"></label>
                                </div>
                            </div>
                            <div class="form-group">
								<div class="col-sm-5">
                                	<label  class="control-label">套餐类型:</label>
								</div>
                                <div class="col-sm-5">
									<label id="type" class="control-label"></label>
                                </div>
                            </div>
                            <div class="form-group">
								<div class="col-sm-5">
                                	<label  class="control-label">套餐价格:</label>
								</div>
                                <div class="col-sm-5">
									<label id="price" class="control-label"></label>
                                </div>
                            </div>
                            <div class="form-group">
								<div class="col-sm-5">
                                	<label  class="control-label">套餐创建时间:</label>
								</div>
                                <div class="col-sm-5">
									<label id="created" class="control-label"></label>
                                </div>
                            </div>
                            <div class="form-group">
								<div class="col-sm-5">
                                	<label  class="control-label">套餐更新时间:</label>
								</div>
                                <div class="col-sm-5">
									<label id="updated" class="control-label"></label>
                                </div>
                            </div>
                       
                            <input type="hidden" id="vid">
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

	</div>
	<!-- END WRAPPER -->
	<!-- Javascript -->
	<script src="../assets/vendor/jquery/jquery.min.js"></script>
	<script src="../assets/vendor/bootstrap/js/bootstrap.min.js"></script>
	<script src="../assets/vendor/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	<script src="../assets/vendor/dataTables/jquery.dataTables.min.js"></script>
	<script src="../assets/scripts/klorofil-common.js"></script>
	<!--<script src="../assets/vendor/sweetalert.min.js"></script>-->
	<script>
		//car -> car - card  or car - custom    can remove card and custom
		//card -> car -card    can remove car
		//custom -> car - custom   can remove car
		var basePath = "/oss-ws/ws/0.1/";
		var thisURL = document.URL;
		var args = thisURL.split('?');
		var getVal =args[1];
		// var type1 = args[2];
		// var type2 = args[3];
		// var ajax = '../ws/0.1/' + type1 + '/cvs?' + getVal; //?cid=1'
        //http://192.168.1.104:8080/oss-ws/ws/0.1/simInfo/chargeRecord?iccid=898602B5191690241164
		var ajax = basePath + 'simInfo/chargeRecord?' + getVal; //?cid=1'
		// var ajax = '../ws/0.1/'+type+'/cvs?'+ getVal; //?cid=1'
	
		var doAjax = function (data, url) {
            $.ajax(
                {
                    url: url,
                    // url: "../ws/0.1/vehicle",
                    // data: data,
                    type: "post",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(data),
                    dataType: "json",
                    beforeSend:function()
                    {
                        $("#tip").html("<span style='color:blue'>正在处理...</span>");
                        return true;
                    },
                    success:function(data)
                    {
                // "url": "../ws/0.1/vehicle/datas",
                        if(data.code == 200)
                        {
                            // table.ajax.url("../ws/0.1/param/pd?paramType=" + type).load();
                            // $("#successMessage").html("修改成功");
							window.location.reload();

                            // table.ajax.url('../ws/0.1/vehicle/datas').load();
                        }
                        else
                        {
                            // $("#warningMessage").html(data.message);
							hideModal();
                            alert(data.message);
                        }
                        // $('#myModal').modal('hide');
                    },
                    error: function()
                    {
                        alert('请求出错');
                    },
                    complete: function()
                    {
                        // $('#acting_tips').hide();
                    }
                });
        }


		var table = $('#chargeRecord').DataTable( {
        oLanguage: {
            "sUrl": "../assets/vendor/dataTables/zh_CN.json"
        },
        "scrollX": true,
        //左下角信息
        info: false,
        //关闭行数选择
        "lengthChange": false,
        //关闭本地搜索
        "searching": false,
        //关系列排
      
         //"serverSide": true,//分页，取数据等等的都放到服务端去
           //"deferRender": true,//当处理大数据时，延迟渲染数据，有效提高Datatables处理能力
            "destory": true,
            "ajax": {
                "dataType": 'json',
                "type": "get",
                "url": basePath + 'simInfo/chargeRecord?' + getVal,
                "data": function (d) {
                    // d.id = id;
                },
                "async": false
            },
            "columns": [
//                 iccid
// amount  充值金额
// packageId  套餐id
// time  充值时间
// uptime 修改时间
// status  充值状态
                {
                    "data": "iccid",
                    "title": 'iccid'
                },{
                    "data": "amount",
                    "title": '充值金额'
                }, {
                    "data": "packageId",
                    "title": "套餐",
                    render: function (data) {
                        return "<a href='#' onClick='showModal("
                            + JSON.stringify(data)
                            + ")'>"
                            + data
                            + "</a>"
                            ;
                    }
                }, {
                    "data": "time",
                    "title": "充值时间"
                }, {
                    "data": "uptime",
                    "title": "修改时间"
                }, {
                    "data": "status",
                    "title": "充值状态"
				}
            ]

        // "ajax": '../assets/device_ajax.txt'
    } );
    var showModal = function (packageId) {
        cleanModal();
        $.get(basePath + 'simInfo/packAgeInfo?packageId=' + packageId, function (data) {
        var a = {
            "packageId":"R0006",
            "name":"移动-1G/月(叠加套餐)",
            "operator":"移动",
            "flowTotal":1024,
            "activeMonth":1,
            "type":4,
            "price":0.01,
            "created":"2017-07-07 15:29:58",
            "updated":"2017-05-05 09:45:50"}	
            //  jsonObject.put("packageId", simFlowPackageInfo.getFlowPackageId());//套餐编号
            // jsonObject.put("name", simFlowPackageInfo.getName());//套餐名称
            // jsonObject.put("operator", operator);//运营商
            // jsonObject.put("flowTotal", simFlowPackageInfo.getFlowTotal());//套餐内总流量
            // jsonObject.put("activeMonth", simFlowPackageInfo.getActiveMonth());//套餐生效月数
            // jsonObject.put("type", simFlowPackageInfo.getType());//套餐类型
            // jsonObject.put("price", simFlowPackageInfo.getPrice());//套餐价格
            // jsonObject.put("created", sdf.format(simFlowPackageInfo.getCreated()));//创建时间
            // jsonObject.put("updated", sdf.format(simFlowPackageInfo.getModified()));//更新时间		
            var packageId = data.packageId;
            $('#packageId').text(data.packageId);
            $('#name').html(data.name);
            $('#operator').text(data.operator);
            $('#flowTotal').text(data.flowTotal);
            $('#activeMonth').text(data.activeMonth);
            $('#type').text(data.type);
            $('#price').text(data.price);
            $('#created').text(data.activeMonth);
            $('#updated').text(data.activeMonth);
		})
        $('#myModal').modal('show');
    }

    var cleanModal = function(){
            $('#packageId').text('');
            $('#name').text('');
            $('#operator').text('');
            $('#flowTotal').text('');
            $('#activeMonth').text('');
            $('#type').text('');
            $('#price').text('');
            $('#created').text('');
            $('#updated').text('');
    }
		
		
	</script>
</body>

</html>
